<script setup>
import {getCollectedArticle} from "@/api/request.js";
import {onBeforeMount, ref} from "vue";
import {useUserStore} from "@/store/user.js";
import ArticleItem from "@/components/articleItem.vue";
import {goBackToThePreviousPage} from "@/util/common.js";
import router from "@/router/index.js";

const store = useUserStore()
const collection = ref([])

onBeforeMount(async () => {
  await getCollectedArticle({
    userId: store.userId
  }).then(res => {
    if (res.data !== null) {
      collection.value = res.data
    }
  })
})
</script>

<template>
  <van-nav-bar left-arrow fixed title="我的收藏" @click-left="goBackToThePreviousPage"/>

  <div class="app-container">
    <div v-if="collection.length === 0" class="empty-container">
      <van-empty description="空空如也"/>
    </div>
    <template v-for="item in collection">
      <ArticleItem :article="item.article" :knowledge-bases="item.knowledgeBases" :user="item.user"></ArticleItem>
    </template>
  </div>

</template>

<style lang="scss" scoped>
.app-container {
  height: 100vh;
  overflow: auto;
  padding: 3.5rem 1rem 1rem;

}
</style>